<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>My age is:{{age}}</p>
        <!-- 点击事件 -->
        <!-- v-on:[事件名称]="函数(参数)" | @[事件名称]="函数(参数)" -->
        <button v-on:click="addAge(1)">+ 1</button>
        <button @click="age--">- 1</button>
        <!-- v-on:dblclick 双击事件 -->
        <button v-on:dblclick="addAge(10)">double 10</button>
        <!-- 修饰符once，只能添加一次 -->
        <button v-on:click.once="addAge(1)">~ + 1</button>
        <!-- 鼠标移动事件 -->
        <div style="width: 600px;padding: 200px 20px;text-align: center;border: 1px solid #000000;" 
            @mousemove="coords">
            {{x}},{{y}}
            <!-- js停止鼠标移动事件 -->
            <!-- <span @mousemove="stopMoving">Stop Moving</span> -->
            <!-- vue使用停止修饰符事件 -->
            <span @mousemove.stop>Stop Moving</span>
        </div>
        <!-- prevent阻止修饰符 -->
        <a @click.prevent="alert()" href="https://www.baidu.com">禁用百度</a>
    </div>
    <script src="js/ch05.js"></script>
</body>
</html>